<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./css/animate.min.css">

    <!-- bootstrap核心css -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./css/reset.less">

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./css/common.less">

    <!-- 页面样式 -->
    <link rel="stylesheet/less" href="./css/login.less">
</head>

<body>
    <div class="top"></div>
    <!-- 导航 -->
    <nav class="navbar navbar-default">
        <!-- 移动端导航 -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- logo -->
            <a class="navbar-brand" href="#"><img src="./images/logo.png" alt=""></a>
        </div>
        <!-- PC端 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="./index.html">首页</a></li>
                <li><a href="./list.html">鼎搜投资</a></li>
                <li><a href="./about.html">关于鼎搜</a></li>
                <li><a href="#">鼎搜动态</a></li>
                <li><a href="./login.html">登录</a></li>
                <li><a href="./register.html">注册</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <input type="search">
            </ul>
        </div>
    </nav>
    <!-- 广告 -->
    <div class="banner"><img src="./images/banner.png" alt=""></div>
    <!-- 我要转让 -->
    <div class="title-content">
        <div class="left">
            <hr>
        </div>
        <div class="middle">
            <div>我 要 转 让</div>
            <div>wo yao zhuan rang</div>
        </div>
        <div class="right">
            <hr>
        </div>
    </div>
    <!-- 登录 -->
    <div class="login-content">
        <div class="left">
            <form action="" method="post">
                <button class="bt1">点击登录</button>
                <button class="bt2">点击注册</button>
                <div class="username">
                    用户名:&nbsp;<input type="text" name="username" id="username">
                </div>

                <div class="password">
                    密码： &nbsp;<input type="password" name="password" id="password">
                </div>

                <div class="code">
                    <div>验证码:&nbsp;<input type="text" name="" id="input"></div>
                    <div id="container"></div>
                    <div>看不清?  <a id="replace"> 点击更换</a></div>
                </div>

                <div class="time">
                    有效期：
                    <input class="chk" type="radio" name="chk" id="chk1">
                    <label for="chk1">一个月</label>

                    <input class="chk" type="radio" name="chk" id="chk2">
                    <label for="chk2">一周</label>

                    <input class="chk" type="radio" name="chk" id="chk3">
                    <label for="chk3">一天</label>

                    <input class="chk" type="radio" name="chk" id="chk4">
                    <label for="chk4">即时</label>
                </div>
                <div class="login">
                    <button class="btn3" id="btn">登录</button> 忘记密码？
                </div>     
            </form>
        </div>
        <div class="right">
            <img src="./images/about03.png" alt="">
        </div>
    </div>
    <!-- 底部 -->
    <div class="buttom">
        <div class="navcontent">
            <div class="left">
                <div class="list-box">
                    <div class="title">简介</div>
                    <div class="list">鼎搜网简介</div>
                    <div class="list">鼎搜服务</div>
                    <div class="list">会员身份实名认证</div>
                </div>
                <div class="list-box">
                    <div class="title">帮助</div>
                    <div class="list">用户注册</div>
                    <div class="list">关于鼎搜</div>
                    <div class="list">在线咨询</div>
                </div>
                <div class="list-box">
                    <div class="title">共赢</div>
                    <div class="list">网站合作</div>
                    <div class="list">用户协议</div>
                    <div class="list">会员身份实名认证</div>
                </div>
                <div class="list-box">
                    <div class="title">导航</div>
                    <div class="list">地图首页</div>
                    <div class="list">职能分类</div>
                    <div class="list">企业名录</div>
                </div>
            </div>
            <div class="right">
                <div class="righttop">
                    <div class="topleft">
                        <img src="./images/phone.png" alt="">
                    </div>
                    <div class="topmiddle">
                        <div class="small-title">全国服务热线</div>
                        <div class="small-title">440-880-1779</div>
                        <div class="email">邮箱:dinsoo@163.com</div>
                    </div>
                    <div class="topright">
                        <div class="phone">投诉电话：4408801779</div>
                        <div class="time">周一至周六：9:20-20:00</div>
                        <div class="img"><img src="./images/guanzhu.png" alt=""></div>
                    </div>
                </div>
                <div class="rightbuttom">
                    <div class="img">
                        <img src="./images/ewm.png" alt="">
                    </div>
                    <div>订阅信息</div>
                </div>
            </div>
        </div>
        <div class="buttomlast">
            <div class="copyright">Copyright ©2015 鼎搜网(www.dinsoo.com) 版权所有</div>
        </div>
    </div>
</body>

</html>
<script src="js/less.js"></script>

<!-- jq库 -->
<script src="js/jquery-3.5.1.min.js"></script>

<!-- bootstrap核心js -->
<script src="js/bootstrap.min.js"></script>

<!-- WOWjs -->
<script src="js/wow.min.repeat.js"></script>
<script>
    //字符串数组   0 - 61
    var codelist = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
    ]

    //颜色的数组 12
    var colorlist = ['#f44336', '#009688', '#cddc39', '#03a9f4', '#9c27b0', '#5e4444', '#9ebf9f', '#ffc8c4', '#2b4754', '#b4ced9', '#835f53', '#aa677e']

    // 获取相应的元素
    var btn = document.getElementById('btn')
    var input = document.getElementById('input')
    var container = document.getElementById('container')
    // 生成验证码的方法
    function build_str(len = 4) {
        // 在页面显示的内容
        var output = ''
        // 验证码
        var str = ''
        for (var i = 0; i < len; i++) {
            // 随机获取字符串数组的索引
            var CodeIndex = Math.floor(Math.random() * codelist.length)
            // 随机获取颜色数组的索引
            var ColorIndex = Math.floor(Math.random() * colorlist.length)
            // 通过随机索引获取字符串数组的值
            var Code = codelist[CodeIndex]
            // 通过随机索引获取颜色数组的值
            var Color = colorlist[ColorIndex]
            // 拼接字符串
            str += Code
            // 拼接一个在页面显示的验证码
            output += `<span style="color:${Color}">${Code}</span>`
        }
        // 把生成验证码存储起来，用于做验证
        sessionStorage.setItem('code', str)
        // 把组装的结构给页面
        container.innerHTML = output
    }
    build_str()
    replace.onclick = function () {
        // 重新调用方法
        build_str()
        // 把输入框的内容清空
        input.value = ''
        // 获取焦点
        input.focus()
    }
</script>